<template>
  <router-view />
</template>

<script setup>
import { onMounted, watch } from 'vue'
import { useConfigStore } from './store/config'

const configStore = useConfigStore()

// 初始化主题
onMounted(() => {
  if (configStore.isDarkMode) {
    document.documentElement.classList.add('dark')
  }
})

// 监听主题变化
watch(
  () => configStore.theme,
  (newTheme) => {
    if (newTheme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }
)
</script>

<style>
/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* 暗黑模式 */
html.dark {
  color-scheme: dark;
}
</style>
